<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: #f00;
            /*margin: 200px auto;*/

            /*两个值 （x，y） 向x轴偏移，向y轴偏移*/
            /*-webkit-transform: translate(100px,200px);!*兼容谷歌和苹果*!*/
            /*-moz-transform: translate(100px,200px);!*兼容火狐*!*/
            /*-ms-transform: translate(100px,200px);!*兼容IE*!*/
            /*-o-transform: translate(100px,200px);!*兼容欧朋*!*/
            /*transform: translate(100px,200px);!*W3C浏览器*!*/

            /*可以为负数*/
            -webkit-transform: translate(-100px,200px);
            -moz-transform: translate(-100px,200px);
            -ms-transform: translate(-100px,200px);
            -o-transform: translate(-100px,200px);
            transform: translate(-100px,200px);

            /*一个值（x）只向x轴偏移 （0，y）只向y轴偏移*/
            /*-webkit-transform: translate(200px);*/
            /*-moz-transform: translate(200px);*/
            /*-ms-transform: translate(200px);*/
            /*-o-transform: translate(200px);*/
            /*transform: translate(200px);*/

            /*translateX(x) 只向x轴偏移 */
            /*translateY(y) 只向x轴偏移*/
            -webkit-transform: translateX(200px);
            -moz-transform: translateX(200px);
            -ms-transform: translateX(200px);
            -o-transform: translateX(200px);
            transform: translateX(200px);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>